div{
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 100px;
    color: white;
    transition: all 1s;

}
.rotate{
    background-color: #ec746e;
    
}
.rotate:hover{
    transform: rotate(20deg);
}
.scale{
    background-color: rgb(224,192,88) ;
}
.scale:hover{
    transform: scale(3,1);
}
.skew{
    background-color: rgb(60,123,141);

}
.skew:hover{
    transform: skew(20deg,10deg);
}
.translate{
    background-color: rgb(61,159,139);
    transition: all 1s;
}
.translate:hover{
    transform: translate(500px,0);
}